<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-descriptions title="订单信息">
        <a-descriptions-item label="订单编号">{{ orderInfo.id }}</a-descriptions-item>
        <a-descriptions-item label="充值者编号">{{ orderInfo.rechargerId }}</a-descriptions-item>
        <a-descriptions-item label="充值者用户名">{{ orderInfo.param.rechargerUsername }}</a-descriptions-item>
        <a-descriptions-item label="被充值者编号">{{ orderInfo.rechargedId }}</a-descriptions-item>
        <a-descriptions-item label="被充值者用户号">{{ orderInfo.param.rechargedUsername }}</a-descriptions-item>
        <a-descriptions-item label="充值金额">{{ orderInfo.rechargeAmount }}</a-descriptions-item>
        <a-descriptions-item label="订单状态">{{ orderInfo.param.stringOrderStatus }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ orderInfo.createTime }}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ orderInfo.updateTime }}</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px" />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import orderApi from '@/api/order'

export default {
  components: {
    STable
  },
  data () {
    return {
      id: null,
      orderInfo: {}
    }
  },
  created () {
    this.id = this.$route.params.id
    this.init()
  },
  methods: {
    init () {
      orderApi.showRechargeOrder(this.id).then(res => {
        console.log(res)
        this.orderInfo = res.data
        console.log(this.orderInfo)
      })
    }
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        'processing': '进行中',
        'success': '完成',
        'failed': '失败'
      }
      return statusMap[status]
    }
  },
  computed: {
    title () {
      return this.$route.meta.title
    }
  }

}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, .85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>
